<template>
  <div class="home">
    <cube-index-list :data="components"
                     :title="title"
                     @select="selectItem"
                     @title-click="clickTitle">
      <cube-index-list-group v-for="(group, index) in components"
                             :key="index"
                             :group="group">
        <cube-index-list-item v-for="(item, index) in group.items"
                              :key="index"
                              :item="item"
                              @select="selectItem">
          <div class="custom-item border-bottom-1px">
            <span>{{item.name}}</span>
            <i class="cubeic-arrow"></i>
          </div>
        </cube-index-list-item>
      </cube-index-list-group>
    </cube-index-list>
  </div>
</template>

<script>
const components = [
  {
    name: "Component",
    items: [
      {
        name: "图像验证码",
        value: "ImgVerifyDemo"
      },
      {
        name: "支付弹窗",
        value: "PayLayerDemo"
      }
    ]
  }
];

export default {
  data() {
    return {
      title: "",
      components: components
    };
  },
  methods: {
    selectItem(item) {
      console.log(item.value);
      this.$router.push({ name: item.value });
    },
    clickTitle(title) {
      console.log(title);
    }
  }
};
</script>

<style scoped>
.home {
  width: 100vw;
  height: 100vh;
}
.custom-item {
  height: 40px;
  padding-left: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333;
}
</style>

